import "package:flutter/material.dart";

// 水平滚动列表
class UseList_Hor extends StatelessWidget {
  const UseList_Hor({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 120, //通过设置高度限制滚动列表子元素高度
      child: ListView(
        scrollDirection: Axis.horizontal, //水平滚动
        children: <Widget>[
          Container(
            height: 120, //在水平滚动list内的Container设置height无效，均自适应占满父容器
            width: 100, //在垂直滚动list内的Container设置width无效，均自适应占满父容器
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                Container(
                  height: 80,
                  padding: const EdgeInsets.all(4),
                  child: Image.asset(
                    "images/1.jpg",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text('图片标题')
              ],
            ),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.yellow),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.yellow),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.yellow),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.yellow),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          Container(
            height: 120,
            width: 100,
            decoration: const BoxDecoration(color: Colors.yellow),
          ),
        ],
      ),
    );
  }
}
